<template>
    <div style="width:100%">
        <div>
            <h3 style="margin-left:40px">请选择事务类型</h3>
        </div>

        <div class="reminder_date">
            <el-form style="width:70%" label-width="100px" class="demo-ruleForm" :model="from" :rules="rules" ref="from">
                <el-form-item label="事务名称" style="width:50%" prop="name">
                    <el-input placeholder="请输入内容" size="medium" v-model="from.name" clearable></el-input>
                </el-form-item>
                <el-form-item label="特殊资源" prop="alarmSetVo.type">
                    <el-radio-group v-model="from.alarmSetVo.type">
                        <el-radio label="02">仅一次</el-radio>
                        <el-radio label="00">每周</el-radio>
                        <el-radio label="01">每月</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- <div style="margin-left:40px; margin-bottom: 30px;">
                    <el-radio v-model="from.alarmSetVo.type" label="02">仅一次</el-radio>
                    <el-radio v-model="from.alarmSetVo.type" label="00">每周</el-radio>
                    <el-radio v-model="from.alarmSetVo.type" label="01">每月</el-radio>
                </div> -->
                <el-form-item label="提醒日期" v-if="from.alarmSetVo.type=='02'" style="width:50%" prop="startDate">
                    <el-date-picker v-model="from.alarmSetVo.setTime" value-format="yyyy-MM-dd" style="width:100%" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <div class="containeraa" v-if="from.alarmSetVo.type=='00'">
                    <span style="font-weight:700;">请选择：</span>
                    <div class="reminder_date_buttom">
                        <div :class="[index==weekindex?'reminder_weekclick':'reminder_week']" v-for="(item,index) in weekdata" @click="weekclick(index)">
                            <span class="reminder_week_title">{{item.value}}</span>
                        </div>
                    </div>
                </div>
                <div v-if="from.alarmSetVo.type=='01'" class="containeraa">
                    <span style="font-weight: 700;">请选择日期：</span>
                    <div class="reminder_date_buttom_mouths">
                        <div :class="[index==mouthindex?'reminder_mouthsclick':'reminder_mouths']" v-for="(item,index) in monthdata" @click="mouthsclick(index)">
                            <span class="reminder_week_title">{{item.value}}</span>
                        </div>
                    </div>

                </div>
                <el-form-item label="提醒成员" style="width:50%" prop="startDate">
                    <selectmember type='warehouse' :parentProjId="''" selectType='multipleChoice' style="width:100%;" @selectsuccess='selectsuccessmamber'></selectmember>
                </el-form-item>
                <el-form-item label="事务备注" style="width:50%">
                    <el-input type="textarea" :rows="5" placeholder="请输入备注" size="medium" v-model="from.content" clearable></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="reminder_date_buttom">
            <el-button type="primary" plain @click="saveclick">点击设置</el-button>
        </div>

    </div>
</template>
<script>
import { save, list } from "@/api/alarmSet";
import utils from "@/utils/utils";
import selectmember from "@/components/screen/selectmember";
import { util } from "echarts";
export default {
    props: ["docId"],
    data() {
        return {
            from: {
                status: "00",
                setType: "05",
                name: "",
                content: "",
                setTypeId: "",
                alarmSetVo: {
                    type: "02",
                    weekDay: "", //每周几
                    monthDay: "", //每月几号
                    setTime: "", //提醒时间
                },
                userList: [],
            },
            weekindex: 1,
            mouthindex: 0,
            weekdata: [
                { value: "周日", id: 7 },
                { value: "周一", id: 1 },
                { value: "周二", id: 2 },
                { value: "周三", id: 3 },
                { value: "周四", id: 4 },
                { value: "周五", id: 5 },
                { value: "周六", id: 6 },
            ],
            monthdata: [
                { value: 1 },
                { value: 2 },
                { value: 3 },
                { value: 4 },
                { value: 5 },
                { value: 6 },
                { value: 7 },
                { value: 8 },
                { value: 9 },
                { value: 10 },
                { value: 11 },
                { value: 12 },
                { value: 13 },
                { value: 14 },
                { value: 15 },
                { value: 16 },
                { value: 17 },
                { value: 18 },
                { value: 19 },
                { value: 20 },
                { value: 21 },
                { value: 22 },
                { value: 23 },
                { value: 24 },
                { value: 25 },
                { value: 26 },
                { value: 27 },
                { value: 28 },
                { value: 29 },
                { value: 30 },
                { value: 31 },
            ],
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入活动名称",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    components: {
        selectmember,
    },
    created() {
        this.from.setTypeId = this.docId;
    },
    methods: {
        selectsuccessmamber(data) {
            console.log(data);
            if (!utils.isNull(data)) {
                let userArrat = data.split(",");
                userArrat.forEach((item) => {
                    let uers = { userId: item };
                    this.from.userList.push(uers);
                });
            } else {
                this.from.userList = [];
            }
        },
        saveclick() {
            if (this.from.alarmSetVo.type == "00") {
                this.from.alarmSetVo.weekDay = this.weekindex;
                this.from.alarmSetVo.setTime = "";
                this.from.alarmSetVo.monthDay = "";
            } else if (this.from.alarmSetVo.type == "01") {
                this.from.alarmSetVo.monthDay = this.mouthindex + 1;
                this.from.alarmSetVo.weekDay = "";
                this.from.alarmSetVo.setTime = "";
            } else {
                this.from.alarmSetVo.weekDay = "";
                this.from.alarmSetVo.monthDay = "";
            }
            // if (!this.taskForm.projId) {
            //     _this.$message.error("请选择关联项目");
            //     return;
            // }
            if (utils.isNull(this.from.alarmSetVo.setTime) && utils.isNull(this.from.alarmSetVo.monthDay) && utils.isNull(this.from.alarmSetVo.weekDay)&&this.from.alarmSetVo.weekDay!=0) {
                this.$message.error("请选择提醒日期");
                return;
            }
            save(this.from).then((res) => {
                this.from.name = "";
                this.from.content = "";
                this.from.alarmSetVo.type = "02";
                this.from.alarmSetVo.weekDay = "";
                this.from.alarmSetVo.monthDay = "";
                this.from.alarmSetVo.setTime = "";
                (this.weekindex = 1),
                    (this.mouthindex = 0),
                    this.$emit("alarmsuccess");
            });
        },
        mouthsclick(data) {
            this.mouthindex = data;
        },
        weekclick(data) {
            this.weekindex = data;
            console.log(this.weekindex);
        },
    },
};
</script>
 <style scoped>
.reminder_date {
    width: 100%;
    display: flex;
    margin-top: 40px;
}
.containeraa {
    margin-top: 40px;
    margin-left: 40px;
    margin-bottom: 30px;
}
.reminder_date_buttom {
    width: 100%;
    display: flex;
    margin-top: 40px;
    margin-left: 40px;
    /* justify-content: end; */
}
.reminder_week {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    margin-right: 10px;
    border-radius: 5px;
    cursor: pointer;
}
.reminder_weekclick {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    margin-right: 10px;
    border-radius: 5px;
    /* background-color: rgb(136, 233, 84); */
    background-color: rgb(102, 177, 255);
    color: #fff;
    cursor: pointer;
    /* color: #fff; */
}
.reminder_date_buttom_mouths {
    display: flex;
    width: 550px;
    flex-wrap: wrap;
    margin-left: 40px;
    margin-top: 40px;
}
.reminder_mouths {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    margin-right: 10px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 10px;
}
.reminder_mouthsclick {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    margin-right: 10px;
    border-radius: 5px;
    /* background-color: rgb(136, 233, 84); */
    background-color: rgb(102, 177, 255);
    color: #fff;
    cursor: pointer;
    margin-bottom: 10px;
    /* color: #fff; */
}
.reminder_week_title {
    font-size: 16px;
}
</style>
